{% extends "base.html" %}

{% block external %}
		
	<script type="text/javascript">
	$(function() {
		$( "#slider" ).slider({
			range: "min",
			value: {{ review.rating }},
			min: 1,
			max: 100,
			slide: function( event, ui ) {
				$( "#rating" ).text( ui.value + " / 100");
				$( "#id_rating" ).val( ui.value );
			}
		});
		
		$( "#rating" ).text( $( "#slider" ).slider( "value" ) + " / 100" );
		$( "#id_rating" ).val( $( "#slider" ).slider( "value" ) );
	});
	</script>
	
{% endblock %}

{% block content %}


<div class="row">
	<div class="span12 columns offset2">
		{% if form %}
		<form enctype="multipart/form-data" method="post" action="">
			{% csrf_token %}
			<fieldset>
				<h1 class="inline">Edit Review </h1>
				<br><em>for the {{ review.dish.name }} at {{ review.dish.place}}</em>
				
				<p>
					<h3>Rating</h3>
					
					Taste <span id="rating"></span>	
					<div id="slider"></div>
				</p>

				<div class="clearfix" style="display: none">
					<label for="id_rating">
						Rating
					</label>
					<div class="input">
						<input type="text" name="rating" id="id_rating"/>
					</div>
				</div>
								
				<p>
					<h3>Photo (optional)</h3>
					{% if review.dish.photos %}
					<ul>
						{% for photo in review.dish.photos.all %}
						<li class="inline">
							<a href="">
							<img src="/media/{{ photo.thumbnail.url }}" class="imagedropshadow" />
							</a>
						</li>
						{% endfor %}
					</ul>
					{% endif %}
				</p>

				<div class="clearfix">
					<label for="id_img">
						Upload a photo
					</label>
					<div class="input">
						<input class="input-file" type="file" name="img" id="id_img" />
					</div>
				</div>

				<div class="clearfix">
					<h3>Review</h3>
					<div class="input largereview">						
						<textarea id="id_text" class="xxlarge" rows=10 name="text">{{ review.text }}</textarea>
					</div>
				</div>

				<div class="actions">
					<input type="submit" value="Submit" class="btn primary"/>&nbsp;<a href="/{{ urls.DISH }}/{{ dish.slug }}" class="btn">Cancel</a>
				</div>
			</fieldset>
		</form>
		{% endif %}
	</div>
</div>
{% endblock %}